<template>
	<div class="todo-footer" v-show="total">
		<el-row>
			<span>
				<span>已选择--{{ doneTotal }}--</span> / 共计--{{ total }}￥--
			</span>
			<el-button size="mini" type="primary" @click="dialogVisible = true">确认订单</el-button>
		</el-row>
		<el-dialog title="取餐码" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
			<span style="background-color:#434A52;color: white;font-size: 18px;">{{num}}</span>
			<span slot="footer" class="dialog-footer">
				<el-row>
					<el-col :span="2" :offset="18">
						<el-button type="primary" @click="confirm">提交</el-button>
					</el-col>
					<el-col :span="2" :offset="2">
						<el-button type="primary" @click="Close">取消</el-button>
					</el-col>
				</el-row>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import userDataMixin from '../../mixin/userDataMixin'
	export default {
		data() {
			return {
				num: 0
			}
		},
		mixins: [userDataMixin],
		name: "ConsumFooter",
		props: ["todos", "checkAllTodo", "clearAllTodo", "listNumber", "datas"],
		watch: {
			listNumber(vaule) {
				this.num = this.student.studentNumber.toString() + Math.floor(Math.random() * 10 + 2).toString();
			}
		},
		computed: {
			//总数
			total() {
				const totalPrice = 0;
				return this.todos.reduce(
					(pre, todo) => pre + (todo.done ? totalPrice + todo.price : totalPrice),
					0
				);
			},
			//已选择数
			doneTotal() {
				return this.todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0);
			},
			//控制全选框
			isAll: {
				//全选框是否勾选
				get() {
					return this.doneTotal === this.total && this.total > 0;
				},
				//isAll被修改时set被调用
				set(value) {
					this.checkAllTodo(value);
				},
			},
		},
		data() {
			return {
				dialogVisible: false,
				input: ''
			};
		},

		methods: {
			confirm() {
				this.dialogVisible = false
				const datasy=[]
				for (let i in this.listNumber) {
					datasy.push({"id":this.listNumber[i]})
				}
				this.$axios({
					method: "post",
					url: "/StudentUserOrderingFood",
					data: JSON.stringify(datasy),
					headers: {
						"Content-Type": "application/json"
					},
				}).then((res) => {
					if (res.data.code == 200) {
						this.$axios({
							method: "post",
							url: "/Cons/orderMenu",
							data: JSON.stringify(this.datas),
							headers: {
								"Content-Type": "application/json"
							},
						}).then((res) => {
							if(res.data.code==200){
								alert("成功")
							}else{
								alert("失败")
							}
						})
					}
					if (res.data.code == 415) {
						alert("余额不足,未定购或定购不全")
					}
				}).catch((e) => {
					console.log(e);
				});
			},
			Close(){
				this.$confirm('确认取消？')
					.then(_=>{
						this.dialogVisible = false
					})
			},
			handleClose(done) {
				this.$confirm('确认取消？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			}
		}
	};
</script>

<style scoped>
	/*footer*/
	.todo-footer {
		padding: 10px;
	}

	.todo-footer label {
		display: inline-block;
		margin-right: 20px;
		cursor: pointer;
	}

	.todo-footer label input {
		position: relative;
		top: -1px;
		vertical-align: middle;
		margin-right: 5px;
	}

	.todo-footer button {
		float: right;
		margin-top: 5px;
	}
</style>
